<template>
  <div class="main-container">
    <img :src="avatar" class="avatar" />
    <div class="commit-input">
      <textarea class="commit-input-text" :placeholder="placeholder" v-model="content"></textarea>
    </div>
    <div class="submit-btn">
      <div @click="sendCommit">发布</div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue"
import { communitySendCommit, communityReply } from '@/api.js'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from "element-plus";
const route = useRoute()
console.log(route.query);
const props = defineProps({
  placeholder: String,
  avatar: String,
  type: Number,
  commitId: String,
})
const content = ref('')
console.log(props);
const userInfo = JSON.parse(localStorage.getItem('userInfo'))
const sendCommit = () => {
  if (props.type == 1)
    communitySendCommit(route.query.articleId, content.value, userInfo.uuid).then(res => {
      console.log(res);
      if (res.success) {
        ElMessage({
          message: "评论发布成功",
          type: "success",
        });
        location.reload();
      }
    })
  else {
    communityReply(props.commitId, userInfo.uuid, content.value).then(res => {
      console.log(res);
      if (res.success) {
        ElMessage({
          message: "评论发布成功",
          type: "success",
        });

        location.reload();
      } else {
        ElMessage({
          message: "评论发布失败",
          type: "error",
        });
      }
    })
  }
}
</script>

<style scoped>
.main-container {
  display: flex;
  width: 100%;
}

.avatar {
  width: 45px;
  height: 45px;
  border-radius: 100px;
  margin-right: 20px;
}

.commit-input {
  background-color: #F0F0F0;
  border-radius: 5px;
  height: 65px;
  margin-right: 20px;
  flex: 1;
  border: 1px solid transparent;
}

.submit-btn {
  width: 70px;
  height: 50px;
  border-radius: 10px;
  background-color: #00A1D6;
  align-self: center;
  cursor: pointer;
  display: flex;
  color: white;
  align-items: center;
  justify-content: center;
}

.commit-input:hover {
  background-color: #fff;
  border: 1px solid #e2e2e2;
}

.commit-input-text {
  height: 100%;
  width: 100%;
  background-color: #F0F0F0;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 5px;
}

.commit-input-text:hover {
  background-color: #fff;
}
</style>